<div class="da-list-wrap">
  <div class="da-content-wrapper">
    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <div class="da-list-header">
            <div class="da-header-left">
              <d-row [dSpace]="15" [dAlign]="'center'" [dSpaceDirection]="'horizontal'">
                <d-col>
                  <div class="da-header-item-label">集群配置</div>
                </d-col>
              </d-row>
            </div>
            <div class="header-right">
              <d-button style="margin-right: 8px" bsStyle="primary" (btnClick)="submitForm()">
                {{ 'app.common.operate.save.label' | translate }}
              </d-button>
              <d-button bsStyle="common">
                {{ 'app.common.operate.cancel.label' | translate }}
              </d-button>
            </div>
          </div>
        </div>
      </d-col>
    </d-row>

    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <div class="list-content">
            <d-panel [type]="'primary'" #basicPanel [isCollapsed]="isBasicCollapsed" [showAnimation]="true">
              <d-panel-header>
                <em class="icon icon-select-arrow" [ngClass]="{ open: basicPanel.isCollapsed }"></em>
                Basic
              </d-panel-header>
              <d-panel-body>
                <d-row [dGutter]="20">
                  <d-col [dSpan]="12">
                    <form dForm ngForm [layout]="layoutDirection">
                      <div class="modal-body" style="padding: 0px 0px 0px 0px">
                        <d-form-item>
                          <d-form-label [required]="true" style="flex: 0 0 180px;">name:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="name" [(ngModel)]="formData.name" />
                          </d-form-control>
                        </d-form-item>
                        <d-form-item>
                          <d-form-label [required]="true" style="flex: 0 0 180px;">资源:</d-form-label>
                          <d-form-control>
                            <d-select name="clusterCredential"
                                      [allowClear]="true"
                                      [enableLazyLoad]="true"
                                      [filterKey]="'name'"
                                      [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                                      [options]="clusterCredentialList"
                                      size="sm"
                                      (loadMore)="onClusterCredentialLoadMore($event)"
                                      [(ngModel)]="formData.clusterCredential"></d-select>
                          </d-form-control>
                        </d-form-item>
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">备注:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="remark" [(ngModel)]="formData.remark" />
                          </d-form-control>
                        </d-form-item>
                      </div>
                    </form>
                  </d-col>
                  <d-col [dSpan]="12">
                    <form dForm ngForm [layout]="layoutDirection">
                      <div class="modal-body" style="padding: 0px 0px 0px 0px">
                        <d-form-item>
                          <d-form-label [required]="true" style="flex: 0 0 180px;">Flink 版本:</d-form-label>
                          <d-form-control>
                            <d-select name="flinkRelease"
                                      [allowClear]="true"
                                      [enableLazyLoad]="true"
                                      [filterKey]="'fileName'"
                                      [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                                      [options]="flinkReleaseList"
                                      size="sm"
                                      (loadMore)="onFlinkReleaseLoadMore($event)"
                                      [(ngModel)]="formData.flinkRelease"></d-select>
                          </d-form-control>
                        </d-form-item>
                        <d-form-item>
                          <d-form-label [required]="true" style="flex: 0 0 180px;">模式:</d-form-label>
                          <d-form-control>
                            <d-select name="deployMode"
                                      [allowClear]="true"
                                      [filterKey]="'label'"
                                      [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                                      [options]="deployModeList"
                                      size="sm"
                                      [(ngModel)]="formData.deployMode"></d-select>
                          </d-form-control>
                        </d-form-item>
                      </div>
                    </form>
                  </d-col>
                </d-row>
              </d-panel-body>
            </d-panel>
          </div>
        </div>
      </d-col>
    </d-row>

    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <div class="list-content">
            <d-panel [type]="'primary'" #statePanel [isCollapsed]="isStateCollapsed" [showAnimation]="true">
              <d-panel-header>
                <em class="icon icon-select-arrow" [ngClass]="{ open: statePanel.isCollapsed }"></em>
                State & Checkpoints & Savepoints
              </d-panel-header>
              <d-panel-body>
                <d-row [dGutter]="20">
                  <d-col [dSpan]="12">
                    <form dForm ngForm [layout]="layoutDirection">
                      <div class="modal-body" style="padding: 0px 0px 0px 0px">
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">state.backend:</d-form-label>
                          <d-form-control>
                            <d-select name="state.backend"
                                      [allowClear]="true"
                                      [filterKey]="'label'"
                                      [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                                      [options]="flinkStateBackendList"
                                      size="sm"
                                      [(ngModel)]="formData.configOptions['state.backend']"></d-select>
                          </d-form-control>
                        </d-form-item>
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">state checkpoints dir</d-form-label>
                          <d-form-control>
                            <input dTextInput name="state.checkpoints.dir" [(ngModel)]="formData.configOptions['state.checkpoints.dir']" />
                          </d-form-control>
                        </d-form-item>
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">execution.checkpointing.mode</d-form-label>
                          <d-form-control>
                            <d-select name="flinkSemantic"
                                      [allowClear]="true"
                                      [filterKey]="'label'"
                                      [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                                      [options]="flinkSemanticList"
                                      size="sm"
                                      [(ngModel)]="formData.configOptions['execution.checkpointing.mode']"></d-select>
                          </d-form-control>
                        </d-form-item>
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">execution.checkpointing.unaligned</d-form-label>
                          <d-form-control>
                            <d-toggle name="execution.checkpointing.unaligned"
                                      [size]="'sm'"
                                      [(ngModel)]="formData.configOptions['execution.checkpointing.unaligned']"></d-toggle>
                          </d-form-control>
                        </d-form-item>
                      </div>
                    </form>
                  </d-col>
                  <d-col [dSpan]="12">
                    <form dForm ngForm [layout]="layoutDirection">
                      <div class="modal-body" style="padding: 0px 0px 0px 0px">
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">state savepoints dir:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="state.savepoints.dir" [(ngModel)]="formData.configOptions['state.savepoints.dir']"/>
                          </d-form-control>
                        </d-form-item>
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">execution checkpointing interval:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="execution.checkpointing.interval" [(ngModel)]="formData.configOptions['execution.checkpointing.interval']"/>
                          </d-form-control>
                        </d-form-item>
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">execution.checkpointing.externalized-checkpoint-retention</d-form-label>
                          <d-form-control>
                            <d-select name="flinkCheckpointRetain"
                                      [allowClear]="true"
                                      [filterKey]="'label'"
                                      [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                                      [options]="flinkCheckpointRetainList"
                                      size="sm"
                                      [(ngModel)]="formData.configOptions['execution.checkpointing.externalized-checkpoint-retention']"></d-select>
                          </d-form-control>
                        </d-form-item>
                      </div>
                    </form>
                  </d-col>
                </d-row>

              </d-panel-body>
            </d-panel>
          </div>
        </div>
      </d-col>
    </d-row>

    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <div class="list-content">
            <d-panel [type]="'primary'" #faultPanel [isCollapsed]="isFaultCollapsed" [showAnimation]="true">
              <d-panel-header>
                <em class="icon icon-select-arrow" [ngClass]="{ open: faultPanel.isCollapsed }"></em>
                Fault Tolerance
              </d-panel-header>
              <d-panel-body>
                <d-row [dGutter]="20">
                  <d-col [dSpan]="12">
                    <form dForm ngForm [layout]="layoutDirection">
                      <div class="modal-body" style="padding: 0px 0px 0px 0px">
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">restart-strategy:</d-form-label>
                          <d-form-control>
                            <d-select name="restart-strategy"
                                      [allowClear]="true"
                                      [filterKey]="'label'"
                                      [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                                      [options]="flinkRestartStrategyList"
                                      size="sm"
                                      (valueChange)="onRestartStrategyValueChange($event)"
                                      [(ngModel)]="formData.configOptions['restart-strategy']"></d-select>
                          </d-form-control>
                        </d-form-item>

                        <d-form-item *ngIf="isFixedDelay">
                          <d-form-label style="flex: 0 0 180px;">restart-strategy.fixed-delay.attempts:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="restart-strategy.fixed-delay.attempts" [(ngModel)]="formData.configOptions['restart-strategy.fixed-delay.attempts']" />
                          </d-form-control>
                        </d-form-item>

                        <d-form-item *ngIf="isFailureRate">
                          <d-form-label style="flex: 0 0 180px;">restart-strategy.failure-rate.failure-rate-interval:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="restart-strategy.failure-rate.failure-rate-interval" [(ngModel)]="formData.configOptions['restart-strategy.failure-rate.failure-rate-interval']" />
                          </d-form-control>
                        </d-form-item>

                        <d-form-item *ngIf="isExponentialDelay">
                          <d-form-label style="flex: 0 0 180px;">restart-strategy.exponential-delay.initial-backoff:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="restart-strategy.exponential-delay.initial-backoff" [(ngModel)]="formData.configOptions['restart-strategy.exponential-delay.initial-backoff']" />
                          </d-form-control>
                        </d-form-item>
                        <d-form-item *ngIf="isExponentialDelay">
                          <d-form-label style="flex: 0 0 180px;">restart-strategy.exponential-delay.backoff-multiplier:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="restart-strategy.exponential-delay.backoff-multiplier" [(ngModel)]="formData.configOptions['restart-strategy.exponential-delay.backoff-multiplier']" />
                          </d-form-control>
                        </d-form-item>
                      </div>
                    </form>
                  </d-col>
                  <d-col [dSpan]="12">
                    <form dForm ngForm [layout]="layoutDirection">
                      <div class="modal-body" style="padding: 0px 0px 0px 0px">

                        <d-form-item *ngIf="isFixedDelay">
                          <d-form-label style="flex: 0 0 180px;">restart-strategy.fixed-delay.delay:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="restart-strategy.fixed-delay.delay" [(ngModel)]="formData.configOptions['restart-strategy.fixed-delay.delay']" />
                          </d-form-control>
                        </d-form-item>

                        <d-form-item *ngIf="isFailureRate">
                          <d-form-label style="flex: 0 0 180px;">restart-strategy.failure-rate.delay:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="restart-strategy.failure-rate.delay" [(ngModel)]="formData.configOptions['restart-strategy.failure-rate.delay']" />
                          </d-form-control>
                        </d-form-item>
                        <d-form-item *ngIf="isFailureRate">
                          <d-form-label style="flex: 0 0 180px;">restart-strategy.failure-rate.max-failures-per-interval:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="restart-strategy.failure-rate.max-failures-per-interval" [(ngModel)]="formData.configOptions['restart-strategy.failure-rate.max-failures-per-interval']" />
                          </d-form-control>
                        </d-form-item>

                        <d-form-item *ngIf="isExponentialDelay">
                          <d-form-label style="flex: 0 0 180px;">restart-strategy.exponential-delay.max-backoff:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="restart-strategy.exponential-delay.max-backoff" [(ngModel)]="formData.configOptions['restart-strategy.exponential-delay.max-backoff']" />
                          </d-form-control>
                        </d-form-item>
                        <d-form-item *ngIf="isExponentialDelay">
                          <d-form-label style="flex: 0 0 180px;">restart-strategy.exponential-delay.reset-backoff-threshold:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="restart-strategy.exponential-delay.reset-backoff-threshold" [(ngModel)]="formData.configOptions['restart-strategy.exponential-delay.reset-backoff-threshold']" />
                          </d-form-control>
                        </d-form-item>
                        <d-form-item *ngIf="isExponentialDelay">
                          <d-form-label style="flex: 0 0 180px;">restart-strategy.exponential-delay.jitter-factor:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="restart-strategy.exponential-delay.jitter-factor" [(ngModel)]="formData.configOptions['restart-strategy.exponential-delay.jitter-factor']" />
                          </d-form-control>
                        </d-form-item>
                      </div>
                    </form>
                  </d-col>
                </d-row>
              </d-panel-body>
            </d-panel>
          </div>
        </div>
      </d-col>
    </d-row>

    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <div class="list-content">
            <d-panel [type]="'primary'" #haPanel [isCollapsed]="isHACollapsed" [showAnimation]="true">
              <d-panel-header>
                <em class="icon icon-select-arrow" [ngClass]="{ open: haPanel.isCollapsed }"></em>
                High Availability
              </d-panel-header>
              <d-panel-body>
                <d-row [dGutter]="20">
                  <d-col [dSpan]="12">
                    <form dForm ngForm [layout]="layoutDirection">
                      <div class="modal-body" style="padding: 0px 0px 0px 0px">
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">high-availability:</d-form-label>
                          <d-form-control>
                            <d-select name="high-availability"
                                      [allowClear]="true"
                                      [filterKey]="'label'"
                                      [extraConfig]="{ selectedItemWithTemplate: { enable: true } }"
                                      [options]="flinkHAList"
                                      size="sm"
                                      (valueChange)="onHAValueChange($event)"
                                      [(ngModel)]="formData.configOptions['high-availability']"></d-select>
                          </d-form-control>
                        </d-form-item>
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">high-availability.storageDir:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="high-availability.storageDir" [(ngModel)]="formData.configOptions['high-availability.storageDir']" />
                          </d-form-control>
                        </d-form-item>
                        <d-form-item *ngIf="isZookeeperHA">
                          <d-form-label style="flex: 0 0 180px;">high-availability.zookeeper.path.root:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="high-availability.zookeeper.path.root" [(ngModel)]="formData.configOptions['high-availability.zookeeper.path.root']" />
                          </d-form-control>
                        </d-form-item>
                      </div>
                    </form>
                  </d-col>
                  <d-col [dSpan]="12">
                    <form dForm ngForm [layout]="layoutDirection">
                      <div class="modal-body" style="padding: 0px 0px 0px 0px">
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">high-availability.cluster-id:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="high-availability.cluster-id" [(ngModel)]="formData.configOptions['high-availability.cluster-id']" />
                          </d-form-control>
                        </d-form-item>
                        <d-form-item *ngIf="isZookeeperHA">
                          <d-form-label style="flex: 0 0 180px;">high-availability.zookeeper.quorum:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="high-availability.zookeeper.quorum" [(ngModel)]="formData.configOptions['high-availability.zookeeper.quorum']" />
                          </d-form-control>
                        </d-form-item>
                      </div>
                    </form>
                  </d-col>
                </d-row>
              </d-panel-body>
            </d-panel>
          </div>
        </div>
      </d-col>
    </d-row>


    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <div class="list-content">
            <d-panel [type]="'primary'" #memPanel [isCollapsed]="isMemCollapsed" [showAnimation]="true">
              <d-panel-header>
                <em class="icon icon-select-arrow" [ngClass]="{ open: memPanel.isCollapsed }"></em>
                Memory Configuration
              </d-panel-header>
              <d-panel-body>
                <d-row [dGutter]="20">
                  <d-col [dSpan]="12">
                    <form dForm ngForm [layout]="layoutDirection">
                      <div class="modal-body" style="padding: 0px 0px 0px 0px">
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">jobmanager.memory.process.size:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="jobmanager.memory.process.size" [(ngModel)]="formData.configOptions['jobmanager.memory.process.size']" />
                          </d-form-control>
                        </d-form-item>
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">jobmanager.memory.flink.size:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="jobmanager.memory.flink.size" [(ngModel)]="formData.configOptions['jobmanager.memory.flink.size']" />
                          </d-form-control>
                        </d-form-item>
                      </div>
                    </form>
                  </d-col>
                  <d-col [dSpan]="12">
                    <form dForm ngForm [layout]="layoutDirection">
                      <div class="modal-body" style="padding: 0px 0px 0px 0px">
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">taskmanager.memory.process.size:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="taskmanager.memory.process.size" [(ngModel)]="formData.configOptions['taskmanager.memory.process.size']" />
                          </d-form-control>
                        </d-form-item>
                        <d-form-item>
                          <d-form-label style="flex: 0 0 180px;">taskmanager.memory.flink.size:</d-form-label>
                          <d-form-control>
                            <input dTextInput name="taskmanager.memory.flink.size" [(ngModel)]="formData.configOptions['taskmanager.memory.flink.size']" />
                          </d-form-control>
                        </d-form-item>
                      </div>
                    </form>
                  </d-col>
                </d-row>
              </d-panel-body>
            </d-panel>
          </div>
        </div>
      </d-col>
    </d-row>

    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <div class="list-content">
            <d-panel [type]="'primary'" #logPanel [isCollapsed]="isLogCollapsed" [showAnimation]="true">
              <d-panel-header>
                <em class="icon icon-select-arrow" [ngClass]="{ open: logPanel.isCollapsed }"></em>
                Log
              </d-panel-header>
              <d-panel-body>
                <d-row [dGutter]="[12, 12]">
                  <d-col [dSpan]="24">
                    <div class="da-list-container">
                      <div class="list-content">
                        <d-row [dSpace]="15" [dAlign]="'center'" [dSpaceDirection]="'horizontal'">
                          <d-col>
                            <div class="da-header-item-label">env.log.dir:</div>
                          </d-col>
                          <d-col>
                            <input dTextInput name="env.log.dir" [(ngModel)]="formData.configOptions['env.log.dir']"/>
                          </d-col>
                        </d-row>
                      </div>
                    </div>
                  </d-col>
                </d-row>
              </d-panel-body>
            </d-panel>
          </div>
        </div>
      </d-col>
    </d-row>

    <d-row [dGutter]="[12, 12]">
      <d-col [dSpan]="24">
        <div class="da-list-container">
          <div class="list-content">
            <d-panel [type]="'primary'" #additionalPanel [isCollapsed]="isAdditionalCollapsed" [showAnimation]="true">
              <d-panel-header>
                <em class="icon icon-select-arrow" [ngClass]="{ open: additionalPanel.isCollapsed }"></em>
                Additional Configuration
              </d-panel-header>
              <d-panel-body>
                <d-row [dGutter]="[12, 12]">
                  <d-col [dSpan]="24">
                    <div class="da-list-container">
                      <div class="list-content">
                        <d-row [dSpace]="15" [dAlign]="'center'" [dSpaceDirection]="'horizontal'">
                          <d-col>
                            <div class="da-header-item-label">state.savepoints.dir:</div>
                          </d-col>
                          <d-col>
                            <input dTextInput name="state.savepoints.dir"/>
                          </d-col>
                        </d-row>
                      </div>
                    </div>
                  </d-col>
                </d-row>
              </d-panel-body>
            </d-panel>
          </div>
        </div>
      </d-col>
    </d-row>



  </div>
</div>
